<template>
	<div class="login-container">
		<el-dialog v-model="userStore.visible" title="用户登录" @closed="onclosed">
			<el-row>
				<el-col :span="12">
					<div class="form-box" v-if="scene === 0">
						<el-form :model="loginParams" :rules="rules" ref="ruleFormRef">
							<el-form-item prop="phone">
								<el-input placeholder="请输入手机号" :prefix-icon="User" v-model="loginParams.phone" />
							</el-form-item>
							<el-form-item prop="code">
								<el-input
									placeholder="请输入手机验证码"
									:prefix-icon="Lock"
									:disabled="!isPhone"
									v-model="loginParams.code" />
							</el-form-item>
							<el-form-item>
								<el-button :disabled="!isPhone || timing" @click="getCode">
									获取验证码{{ countdown > 0 ? `(${countdown})` : '' }}
								</el-button>
							</el-form-item>
						</el-form>
						<div class="bottom">
							<el-button
								type="primary"
								:disabled="!isPhone || (loginParams.code && loginParams.code.length !== 6)"
								@click="login">
								登录
							</el-button>
							<div class="change-scene" @click="changeScene(1)">
								<p>微信扫码登录</p>
								<svg
									t="1691645836523"
									class="icon"
									viewBox="0 0 1024 1024"
									version="1.1"
									xmlns="http://www.w3.org/2000/svg"
									p-id="7883"
									width="32"
									height="32">
									<path
										d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z"
										fill="#28C445"
										p-id="7884"></path>
									<path
										d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z"
										fill="#28C445"
										p-id="7885"></path>
								</svg>
							</div>
						</div>
					</div>
					<div class="webchat" v-else-if="scene === 1">
						<div id="wx_login_container">加载中……</div>
						<div class="change-scene" @click="changeScene(0)">
							<p>手机短信验证码登录</p>
							<svg
								t="1691647876977"
								class="icon"
								viewBox="0 0 1024 1024"
								version="1.1"
								xmlns="http://www.w3.org/2000/svg"
								p-id="16808"
								width="32"
								height="32">
								<path
									d="M512.1 512.4m-448 0a448 448 0 1 0 896 0 448 448 0 1 0-896 0Z"
									fill="#1296db"
									p-id="16809"
									data-spm-anchor-id="a313x.search_index.0.i33.36a13a81HHGhOt"
									class=""></path>
								<path
									d="M619.9 796.8H404.2c-23.8 0-43.3-19.5-43.3-43.3V271.2c0-23.8 19.5-43.3 43.3-43.3h215.7c23.8 0 43.3 19.5 43.3 43.3v482.3c0 23.9-19.5 43.3-43.3 43.3z"
									fill="#FFFFFF"
									p-id="16810"
									data-spm-anchor-id="a313x.search_index.0.i32.36a13a81HHGhOt"
									class=""></path>
								<path
									d="M623.2 734H401c-7.7 0-13.9-6.2-13.9-13.9V304.7c0-7.7 6.2-13.9 13.9-13.9h222.2c7.7 0 13.9 6.2 13.9 13.9v415.4c0 7.7-6.2 13.9-13.9 13.9z"
									fill="#1296db"
									p-id="16811"
									data-spm-anchor-id="a313x.search_index.0.i36.36a13a81HHGhOt"
									class=""></path>
								<path
									d="M512.1 765.8m-15.8 0a15.8 15.8 0 1 0 31.6 0 15.8 15.8 0 1 0-31.6 0Z"
									fill="#1296db"
									p-id="16812"
									data-spm-anchor-id="a313x.search_index.0.i34.36a13a81HHGhOt"
									class="selected"></path>
								<path
									d="M550.2 474.4c1-0.5 1.4-1.7 0.9-2.7-1.4-3.3-5.7-9.5-17.3-9.5-15.8 0-21.6 5.7-21.6 5.7s-4.1-5.7-21.6-5.7-25.1 23.5-21.3 42.3c4.1 20.2 17.5 39.6 25.9 39.6s10.9-4.6 18-4.6 12.3 4.6 18.3 4.6 13.1-5.2 18-13.4c3.4-5.7 5.3-11.5 6.1-14.6 0.3-1.1-0.3-2.2-1.4-2.6-4.1-1.3-13.1-5.6-13.1-19.2 0.1-13.1 6.2-18.2 9.1-19.9zM532.4 435.2c1.6-0.3 3.1 1 3 2.6-0.3 3.8-1.4 10.3-5.6 15.1-4.2 4.8-10.5 6.8-14.2 7.6-1.6 0.3-3.1-1-3-2.6 0.3-3.8 1.4-10.3 5.6-15.1 4.2-4.9 10.5-6.8 14.2-7.6z"
									fill="#1296db"
									p-id="16813"
									data-spm-anchor-id="a313x.search_index.0.i35.36a13a81HHGhOt"
									class=""></path>
								<path
									d="M522.8 263.5H473c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5h49.8c2.5 0 4.5 2 4.5 4.5s-2 4.5-4.5 4.5z"
									fill="#1296db"
									p-id="16814"
									data-spm-anchor-id="a313x.search_index.0.i37.36a13a81HHGhOt"
									class="selected"></path>
								<path
									d="M548.1 259.5m-5 0a5 5 0 1 0 10 0 5 5 0 1 0-10 0Z"
									fill="#BF67E8"
									p-id="16815"></path>
							</svg>
						</div>
					</div>
				</el-col>
				<el-col :span="12">
					<el-row>
						<el-col :span="12" class="img-box">
							<img src="../../assets/images/code_app.png" alt="" />
							<svg
								t="1691646394887"
								class="icon"
								viewBox="0 0 1024 1024"
								version="1.1"
								xmlns="http://www.w3.org/2000/svg"
								p-id="8125"
								width="16"
								height="16">
								<path
									d="M664.250054 368.541681c10.015098 0 19.892049 0.732687 29.67281 1.795902-26.647917-122.810047-159.358451-214.077703-310.826188-214.077703-169.353083 0-308.085774 114.232694-308.085774 259.274068 0 83.708494 46.165436 152.460344 123.281791 205.78483l-30.80868 91.730191 107.688651-53.455469c38.558178 7.53665 69.459978 15.308661 107.924012 15.308661 9.66308 0 19.230993-0.470721 28.752858-1.225921-6.025227-20.36584-9.521864-41.723264-9.521864-63.862493C402.328693 476.632491 517.908058 368.541681 664.250054 368.541681zM498.62897 285.87389c23.200398 0 38.557154 15.120372 38.557154 38.061874 0 22.846334-15.356756 38.156018-38.557154 38.156018-23.107277 0-46.260603-15.309684-46.260603-38.156018C452.368366 300.994262 475.522716 285.87389 498.62897 285.87389zM283.016307 362.090758c-23.107277 0-46.402843-15.309684-46.402843-38.156018 0-22.941502 23.295566-38.061874 46.402843-38.061874 23.081695 0 38.46301 15.120372 38.46301 38.061874C321.479317 346.782098 306.098002 362.090758 283.016307 362.090758zM945.448458 606.151333c0-121.888048-123.258255-221.236753-261.683954-221.236753-146.57838 0-262.015505 99.348706-262.015505 221.236753 0 122.06508 115.437126 221.200938 262.015505 221.200938 30.66644 0 61.617359-7.609305 92.423993-15.262612l84.513836 45.786813-23.178909-76.17082C899.379213 735.776599 945.448458 674.90216 945.448458 606.151333zM598.803483 567.994292c-15.332197 0-30.807656-15.096836-30.807656-30.501688 0-15.190981 15.47546-30.477129 30.807656-30.477129 23.295566 0 38.558178 15.286148 38.558178 30.477129C637.361661 552.897456 622.099049 567.994292 598.803483 567.994292zM768.25071 567.994292c-15.213493 0-30.594809-15.096836-30.594809-30.501688 0-15.190981 15.381315-30.477129 30.594809-30.477129 23.107277 0 38.558178 15.286148 38.558178 30.477129C806.808888 552.897456 791.357987 567.994292 768.25071 567.994292z"
									fill="#5D5D5D"
									p-id="8126"></path>
							</svg>
							<p>微信扫一扫关注</p>
							<p>“快速预约挂号”</p>
						</el-col>
						<el-col :span="12" class="img-box">
							<img src="../../assets/images/code_login_wechat.png" alt="" />
							<svg
								t="1691646570235"
								class="icon"
								viewBox="0 0 1024 1024"
								version="1.1"
								xmlns="http://www.w3.org/2000/svg"
								p-id="9287"
								width="16"
								height="16">
								<path
									d="M256 85.333333h512c64.8 0 117.333333 52.533333 117.333333 117.333334v618.666666c0 64.8-52.533333 117.333333-117.333333 117.333334H256c-64.8 0-117.333333-52.533333-117.333333-117.333334V202.666667c0-64.8 52.533333-117.333333 117.333333-117.333334z m0 64a53.333333 53.333333 0 0 0-53.333333 53.333334v618.666666a53.333333 53.333333 0 0 0 53.333333 53.333334h512a53.333333 53.333333 0 0 0 53.333333-53.333334V202.666667a53.333333 53.333333 0 0 0-53.333333-53.333334H256z m170.666667 618.666667a32 32 0 0 1 0-64h170.666666a32 32 0 0 1 0 64H426.666667z"
									fill="#000000"
									p-id="9288"></path>
							</svg>
							<p>扫一扫下载</p>
							<p>“预约挂号”APP</p>
						</el-col>
					</el-row>
					<el-row class="tip-box">
						<p class="tip">尚医通官方指定平台</p>

						<p class="tip">快速挂号 安全放心</p>
					</el-row>
				</el-col>
			</el-row>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/user';
import { User, Lock } from '@element-plus/icons-vue';
import { ref, reactive, computed } from 'vue';
import { getUserCode, getWxLoginParam } from '@/api/hospital';
import { ElMessage } from 'element-plus';
import countdownH from '@/utils/countdown';
import type { FormInstance, FormRules } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

const redirect_URL = encodeURIComponent(window.location.origin + window.location.pathname + '#/wxlogin');

const loginParams = reactive({
	// 用户名
	phone: '',
	// 验证码
	code: '',
});

// 表单校验规则
const rules = reactive<FormRules>({
	phone: {
		validator(_rule, value, callback) {
			if (!value) {
				callback('手机号不能为空');
			} else if (value.length !== 11) {
				callback('手机号需要为11位');
			} else if (!/^1[3-9]\d{9}$/.test(value)) {
				callback('手机号格式不正确');
			}

			callback();
		},
		trigger: 'change',
	},
	code: {
		validator(_rule, value, callback) {
			if (!value) {
				callback('验证码不能为空');
			} else if (value.length !== 6) {
				callback('验证码需要为6位');
			} else if (!/[0-9]{6}/.test(value)) {
				callback('验证码格式不正确');
			}

			callback();
		},
		trigger: 'change',
	},
});

const ruleFormRef = ref<FormInstance>();

// 判断用户名是否为手机号码
let isPhone = computed(() => {
	return /^1[3-9]\d{9}$/.test(loginParams.phone);
});

// 获取用户信息
const userStore = useUserStore();

// 场景 code
let scene = ref(0); // 0：手机号码登录，1：微信扫码登录

// 切换场景
function changeScene(n: number) {
	scene.value = n;

	if (n === 1) {
		userStore.queryState(() => {
			// 判断登录成功后是否需要跳转指定路径
			const redirect = route.query.redirect as string | undefined;

			if (redirect) {
				router.push({
					path: redirect,
				});
			}
		});

		getWxLoginParam(redirect_URL).then((res) => {
			// 文档地址 https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html
			// @ts-ignore
			var obj = new WxLogin({
				self_redirect: true,
				id: 'wx_login_container',
				appid: res.data.appid,
				scope: res.data.scope,
				redirect_uri: res.data.redirectUri,
				state: res.data.state,
				style: 'black',
				href: '',
			});
		});
	}
}

// dialog 关闭回调
function onclosed() {
	scene.value = 0;

	loginParams.code = '';
	loginParams.phone = '';

	ruleFormRef.value?.resetFields();

	reset();
}

let { countdown, startCountdown, timing, reset } = countdownH(60);

// 获取验证码
function getCode() {
	startCountdown();

	getUserCode(loginParams.phone).then((res) => {
		if (res.code === 200) {
			loginParams.code = res.data || '';
		} else {
			ElMessage.warning({
				message: '验证码获取失败',
			});
		}
	});
}

// 登录
function login() {
	ruleFormRef.value?.validate((isValid) => {
		if (isValid) {
			userStore.userLogin(loginParams, () => {
				// 判断登录成功后是否需要跳转指定路径
				const redirect = route.query.redirect as string | undefined;

				if (redirect) {
					router.push({
						path: redirect,
					});
				}
			});
		}
	});
}
</script>

<style scoped lang="scss">
#wx_login_container {
	display: flex;
	justify-content: center;
	align-items: center;
}
.login-container {
	:deep(.el-dialog__body) {
		border-top: 1px solid #eee;
	}
	.form-box {
		border: 1px solid #eee;
		border-radius: 4px;
		overflow: hidden;
		padding: 20px;
		.bottom {
			display: flex;
			flex-direction: column;
			align-items: center;
			:deep(.el-button) {
				width: 100%;
				margin-bottom: 20px;
			}
		}
	}
	.img-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		img {
			width: 130px;
			height: 130px;
		}
		svg {
			margin-top: 6px;
			margin-bottom: 6px;
		}
		p {
			margin-bottom: 6px;
		}
	}
	.tip-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 10px;
		.tip {
			font-size: 20px;
			font-weight: 900;
			margin: 0.5em 0;
			font-style: italic;
		}
	}
	.change-scene {
		display: flex;
		flex-direction: column;
		align-items: center;
		cursor: pointer;
		p {
			margin-bottom: 8px;
			font-size: 14px;
			color: var(--text-color-gray);
		}
	}
}
</style>
